<template>
    <div ref="chart" style="width: 100%;height: 238px;">

    </div>
</template>
<script>
export default {
   data() {
      return {
        myChart: null
      }
   },
   props: {
    viewData: {
        data:[],
        date:[]
      }
      },
      watch: {
        viewData: {
      handler(val) {
        // 判断传入的option是否有内容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.initChart();
          })
        }
      },
      immediate: true,
      deep: true
    },
  },
   created(){
   },
   mounted(){
  
 },
   methods:{
    initChart(){
      // 如果已有实例，则先清理
      if (this.myChart) {
        this.myChart.dispose();
      }
         this.myChart = this.$echarts.init(this.$refs.chart);
        const option = {
            title: {
                text: '最近一周各品类销售图',
                x:'center',
                y:'10px'
            },
    xAxis: {
    type: 'category',
    data: this.viewData.date
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: this.viewData.data,
      type: 'line',
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      }
    }
  ]
        };
        this.myChart.setOption(option);
        // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    
   },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
}
</script>
<style  scoped>

</style>
